{{extend './main.html'}}
{{block 'tologin'}}
<style type="text/css">
    #pwd-level div {
        height: 30px;
        width: 30px;
        display: inline-block;
        float: left;
    }

    #pwd-level span {
        display: inline-block;
        float: left;
    }
</style>

<link href="/public/css/register.css" rel="stylesheet" type="text/css"/>
<div class="aw-register-box">
    <div class="mod-head">
        <a href="/"></a>
        <h1>注册新用户</h1>
    </div>
    <div class="mod-body">
        <form action="" class="aw-register-form" id="register_form">
            <ul>
                <li class="alert alert-danger hide error_message text-left">
                    <i class="icon icon-delete"></i> <em></em>
                </li>
                <li>
                    <input class="aw-register-name form-control" type="text" name="username" placeholder="用户名" value=""/>
                    <span></span>
                </li>
                <li>
                    <input class="aw-register-email form-control" type="text" placeholder="邮箱" name="email" value=""/>
                </li>
                <li>
                    <input class="aw-register-pwd form-control" type="password" name="password" placeholder="密码"/>
                </li>
                <div id='pwd-level'>
                    <span>密码强度:</span>
                    <div style="display: inline; width:80px;height:22px;margin-bottom:16px;">弱</div>
                    <div style="display: inline; width:80px;height:22px;">中等</div>
                    <div style="display: inline; width:80px;height:22px;">强</div>
                </div>
                <hr/>

                <li class="aw-register-verify">
                    <!--/get-verify?'+Date.now() 请求验证码工具只要改变/get-verify请求?后面字符就会让验证码重写运算改变-->
                    <img class="pull-right" width="120" src="/get-verify" onclick="this.src='/get-verify?'+Date.now()">
                    <input type="text" class="form-control" id="vcode" name="vcode" placeholder="验证码"/>
                </li>

                <li class="last">
                    <label>
                        <input type="checkbox" checked="checked" value="agree"/> 我同意</label> <a href="javascript:;"
                                                                                                class="aw-agreement-btn">用户协议</a>
                    <a href="/login" class="pull-right">已有账号?</a>
                    <div class="aw-regiter-agreement hide">
                        <div class="aw-register-agreement-txt" id="register_agreement"></div>
                    </div>
                </li>
                <li class="clearfix">
                    <button type="submit" onclick="postForm(event)" class="btn btn-large btn-blue btn-block">
                        注册
                    </button>
                </li>
            </ul>
        </form>
    </div>
</div>
<div class="modal fade" id="myModal">
    <div class="modal-dialog modal-sm">
        <div class="modal-content">
            <div class="modal-body">
                <h5>注册成功，跳转中(<span>3</span>)</h5>
            </div>
        </div>
    </div>
</div>
<script>
    $('.aw-register-name').blur(function () {
        var val=$(this).val();
        var that=$(this);
        $.ajax({
            url:'/check-username',
            type:'GET',
            data:`username=${val}`,
            success:function(data,msg){
                console.dir(data);
                if(!data.code)throw('请求数据有错误')
                var spanColor=(data.code==='001'?'green':'red');
                that.next().text(data.msg).css({color:spanColor})
            },
            error:function (err) {
                console.log(err)
            }
        })
    })
    // 下面做密码强度红、黄、绿技巧， reg正则规则\d数字, \w小写w是字母，\W大写W是特殊字符
    var reg1=/\d/;
    var reg2=/[a-zA-Z]/;
    var reg3=/\W/;
    function pwdStrength(str){
        var tmpLevel=0;
        //如果匹配其中一项就加1，匹配越多tmpLevel就越大
        if(reg1.exec(str))tmpLevel++;
        if(reg2.exec(str))tmpLevel++;
        if(reg3.exec(str))tmpLevel++;
        return tmpLevel   //最终将tmpLevel级别返回出去
    }
    $('.aw-register-pwd').on('keyup',function () {
        var str=$(this).val();
        var colorArr=['red','yellow','green'];
        var divArr=$('#pwd-level').find('div')
        divArr.map((index,val)=>{$(val).css({'background-color':''})}) //上色前先清空所有div色
        console.log(pwdStrength(str));
        for (var i = 0; i < pwdStrength(str); i++) {  //循环级别，如果1级则才循环一次
            //div元素租循环一次就是第一个div才添加背景色，且colorArr数组0对应危险色
            $(divArr[i]).css({'background-color':colorArr[i]})
        }
    })
    $('#vcode').focus(function () {   //清除验证码错误提示
        $(this).next().text('')
    })
    function postForm(event) {
        event.preventDefault();
        var formData=$('#register_form').serialize();
        console.log(formData);
        $.ajax({
            url:'/doregister',
            type:'POST',
            data:formData,
            // dataType:'json',
            success:function (data) {
                if(data.code==='003'){   //如果code码003则后台提示验证码错误，提示字
                    $('#vcode').next().text(data.msg).css({'color':'red'});
                    return
                }
                if(!data.code||data.code!=='001')throw('请求数据有错误')
                console.log(data.code);
                $('#myModal').modal('show');
                var i=2;
                setInterval(function () {
                    $('.modal').find('span').text(i);
                    if (i===0)window.location='/login';
                    i--;
                },1000);
            },
            error:function (msg) {
                console.log(msg)
            }
        })
    }
</script>
{{/block}}
